<template>
	<div class="container">
		<el-row :gutter="10" class="mb8">
			<!-- <el-input v-model="query.username" placeholder="用户名" clearable @clear="handleSearch" size="small" class="handle-input mr10"></el-input>
			<el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">搜索</el-button> -->
			<el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd(0)">新增</el-button></el-col>
		</el-row>
		<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
			<el-table-column type="index" label="ID" width="55" align="center"></el-table-column>
			<el-table-column prop="model_name" label="模型名称"></el-table-column>
			<el-table-column prop="comment" label="备注"></el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button type="text" icon="el-icon-edit" class="red1" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row.model_id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination
				v-if="paginationShow"
				background
				layout="total,sizes,prev,pager,next"
				:current-page="query.pageIndex"
				:page-size="query.pageSize"
				:total="pageTotal"
				@current-change="handlePageChange"
				@size-change="handleSizeChange"
				:page-sizes="[10, 20, 50, 100]"
			></el-pagination>
		</div>
		<!-- 添加模型配置 -->
		<el-dialog :title="title" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
			<editPoput @closeDialog="editPopupDialog" :Infoitem="Infoitem" v-if="editVisible"></editPoput>
		</el-dialog>
	</div>
</template>

<script>
import {modelListAPI,modelDelAPI} from '@/api/index';
import editPoput from './editModel.vue'
export default {
	name: 'Model',
	components:{editPoput},
	data() {
	    return {
			loading:false,
			tableData:[],//模型配置
			pageTotal:0,
			title:'',
			editVisible:false,
	        query:{
	            pageNum: 1,
	            pageSize: 10,
	        },
			paginationShow:true
	    };
	},
	mounted() {
		this.getData()
	},
	methods:{
		// 获取表格数据
		getData(){
			this.loading = true;
			modelListAPI(this.query).then(res => {
				if (res.status == 200) {
					this.tableData = res.data;
					this.pageTotal = res.total;
					this.loading = false;
				}
			});
		},
		// 添加模型配置
		handleAdd(){
			this.title = '新增模型配置'
			this.editVisible = true
			this.Infoitem = {}
		},
		// 修改模型配置
		handleEdit(data){
			this.title = '修改模型配置'
			this.editVisible = true
			this.Infoitem = data
		},
		editPopupDialog(){
			this.editVisible = false
			this.getData()
		},
		handleClick(tab){
			var that = this
			that.query.pageNum = 1;
			that.getData()
		},
		// 查询
		handleSearch(){
			this.query.pageNum = 1;
			this.getData()
		},
		// 分页导航
		handlePageChange(val){
			this.query.pageNum = val;
			this.getData()
		},
		handleSizeChange(val){
			this.query.pageNum = 1
			this.query.pageSize = val;
			this.getData()
		},
		// 模型删除
		handleDelete(data){
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var parems = {modelId:data}
				modelDelAPI(parems).then(res => {
					if(res.status == 200){
						this.$message.success('删除成功');
						this.getData();
					}else{
						this.$message.error(res.msg);
					}
				});
			}).catch(() => {
				
			});
		},
	}
};
</script>

<style scoped>
.mb8 {
	margin-bottom: 10px;
}
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}
.table {
	width: 100%;
	font-size: 13px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>

